<script setup lang="ts">
import type { getListParams } from '@/apis/video'
import * as videoApis from '@/apis/video'
import { watchEffect, ref, watch, type Ref } from 'vue'
import videoCard from '@/components/videoCard.vue'
import { useIntersectionObserver } from '@vueuse/core'

const props = defineProps<{ videoParms: getListParams }>()
const page = ref(0)
const showList: Ref<any[]> = ref([])
let reqIndex: number = 0

watch(
  () => {
    return props.videoParms
  },
  () => {
    page.value = 0
    showList.value = []
    noMore.value = false
    reqIndex++
    getList()
  },
  {
    deep: true
  }
)

const loading = ref(false)
const noMore = ref(false)
async function getList() {
  let itReqIndex = reqIndex
  let res = (await videoApis.getList(20, page.value, props.videoParms)).data
  if (itReqIndex != reqIndex) return
  showList.value = showList.value.concat(res.data.list)
  loading.value = false
  page.value++
  if (res.data.list.length < 20) noMore.value = true
}

const fotTarget = ref()
useIntersectionObserver(fotTarget, ([{ isIntersecting }]) => {
  if (isIntersecting) {
    loading.value = true
    reqIndex++
    getList()
  }
})
</script>
<template>
  <div>
    <!-- {{ showList }} -->
    <div class="scrollbar-flex-content">
      <el-empty v-if="showList.length == 0 && !loading" description="暂无数据" />
      <el-row :gutter="10">
        <el-col :xs="8" :sm="6" :md="5" :lg="4" :xl="3" v-for="v in showList" :key="v.vod_id">
          <videoCard :video-info="v"></videoCard>
        </el-col>
      </el-row>
      <div v-if="!noMore" ref="fotTarget" class="fotTarget"></div>
      <div v-if="loading" class="fotterLoading" v-loading="true" element-loading-text="正在加载更多。。。"></div>
    </div>
  </div>
  <el-backtop :right="100" :bottom="100" />
</template>
<style>
.el-loading-mask {
  background: rgba(0, 0, 0, 0);
  --el-color-primary: aliceblue;
}
</style>
<style scoped lang="less">
@media only screen and (max-width: 1440px) and (min-width: 992px) {
  .el-col-md-5 {
    max-width: calc(100% / 5);
    flex: 0 0 calc(100% / 5);
  }
}
.fotterLoading {
  width: 100%;
  height: 200px;
}
.scrollbar-flex-content {
  .el-col {
    padding: 10px;
  }

  .el-col:last-child {
    // padding-right: 0;
  }
}
</style>
